boombeachfandomcom-20200222-history
User blog:King Dragonhoff/Editing/Tips and Tricks
__NOEDITSECTION__ Centering Elements The center tag can be used to center elements, but it will also center everything inside the element. The margin property can be used to center an element instead; just add "auto" to the end of it. This will also make a page's source more readable than using center tags. In this example, the element is centered. Note that margin space can be added as normal. If you want margin space, replace the zero with a measurement such as 10px. Text Result: Text Content Overflowing Element If an element with height defined has too much text in it, the contents will overflow the element like this: This is a sentence that might be too long to fit into this element. Result: This is a sentence that might be too long to fit into this element. This can be fixed by simply not defining the height property. The height will auto-fit to the text. This element is exactly like the one above, but the height property is left off: This is a sentence that might be too long to fit into this element. Result: This is a sentence that might be too long to fit into this element. Remember that even if your element looks fine on your device when you define the height property, the element could still appear badly on other screen sizes. Be careful when using the height property. Vertically Aligning Text If you create a box, define its height, and add text to it, you will notice that the text crammed to the top of the box (especially if the font size is much larger than its line height) like in this example: Text Result: Text One way to make sure the text is vertically aligned to the center of the box is to simply not define the height. By default, the height will be set to fit to the text. If you want more space around the text as well, you can use padding. Text Result: Text You can also use this method to vertically align the text to whatever position you want by adjusting the top and bottom padding to different amounts. Text Result: Text Transparency An element can be made more transparent using the opacity property. Example: Text Result: Text You can also change the transparency of things with color using the rgba color syntax. This HTML Color Picker can output rgb colors. In rgba colors, the fourth number that is between 0 and 1 is added. It defines the transparancy. For example, this can be used to make just the background of an element transparent: Text Result: Text This can be used to make text, borders, backgrounds, or anything else with a defined color more transparent. Aligning Inline-Block Elements The text-align property is not only used to align text. It can also align inline-block elements like this: Result: Of course, this will also center align any text inside the elements, so if you want that text to be aligned differently, you will have to add the text-align property to those elements. Floating Elements The float property can be used to make text wrap around elements. The MediaWiki mark-up for images has this capability. You just add a piece that says "left" or "right" like this: But the float property does not just work on images. Check out the table on the Headquarters Damage Calculator page. Remember, the top of a floated element begins on the line below where the element is in the code. Example: *Once the base's Headquarters is destroyed, the attack will end and rewards will be received. *Partially destroying a base without destroying the Headquarters will not result in any rewards. Note, this is not the same as attacking a base in an Operation or Colonel Gearheart's War Factory, see Operation and Colonel Gearheart respectively for more details. *An amount of Resources depending on how much the opponent had unprotected will be received. Learn more about resource rewards on the Loot System page. *One or more Victory Points will be received depending on the type of base destroyed. Learn more about this on the Victory Point page. Result: *Once the base's Headquarters is destroyed, the attack will end and rewards will be received. *Partially destroying a base without destroying the Headquarters will not result in any rewards. Note, this is not the same as attacking a base in an Operation or Colonel Gearheart's War Factory, see Operation and Colonel Gearheart respectively for more details. *An amount of Resources depending on how much the opponent had unprotected will be received. Learn more about resource rewards on the Loot System page. *One or more Victory Points will be received depending on the type of base destroyed. Learn more about this on the Victory Point page. Category:Blog posts